import React from 'react';

function Message({ type, content }) {
  if (type === 'system') {
    return <div className="system-message">{content}</div>;
  }
  
  if (type === 'ai-thinking') {
    return (
      <div className="message ai-message">
        <div className="loading-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
        {content}
      </div>
    );
  }
  
  // 决定消息类型
  const messageClass = `message ${type === 'user' ? 'user-message' : 'ai-message'}`;
  
  // 处理内容中的换行符
  const formattedContent = content.split('\n').map((line, index) => (
    <React.Fragment key={index}>
      {line}
      {index < content.split('\n').length - 1 && <br />}
    </React.Fragment>
  ));
  
  return (
    <div className={messageClass}>
      {formattedContent}
    </div>
  );
}

export default Message; 